<template>
  <div class="article-page">
    <!-- 顶部进度条 -->
    <div class="reading-progress">
      <div class="progress-bar" :style="{ width: readingProgress + '%' }"></div>
    </div>

    <!-- 文章主体区域 -->
    <div class="article-container">
      <!-- 左侧工具栏 -->
      <aside class="article-toolbar">
        <div class="tool-group">
          <button class="tool-btn like-btn" :class="{ active: isLiked }" @click="toggleLike">
            <i class="el-icon-star-off"></i>
            <span class="count">{{ likeCount }}</span>
          </button>
          <button class="tool-btn" @click="toggleBookmark">
            <i :class="isBookmarked ? 'el-icon-collection-tag' : 'el-icon-collection'"></i>
          </button>
          <button class="tool-btn share-btn" @click="showShareMenu = true">
            <i class="el-icon-share"></i>
          </button>
        </div>

        <div class="tool-group">
          <button class="tool-btn" @click="adjustFontSize('decrease')">
            <i class="el-icon-minus"></i>
          </button>
          <button class="tool-btn" @click="adjustFontSize('increase')">
            <i class="el-icon-plus"></i>
          </button>
          <button class="tool-btn" @click="toggleDarkMode">
            <i :class="isDarkMode ? 'el-icon-sunny' : 'el-icon-moon'"></i>
          </button>
        </div>
      </aside>

      <!-- 文章内容区 -->
      <main class="article-main" :class="{ 'dark-mode': isDarkMode }">
        <!-- 文章头部 -->
        <header class="article-header">
          <div class="article-category">
            <span class="category-tag">{{ article.category }}</span>
            <span class="read-time">预计阅读 {{ article.readTime || '5' }} 分钟</span>
          </div>
          
          <h1 class="article-title">{{ article.title }}</h1>
          
          <div class="article-meta">
            <div class="author-info">
              <el-avatar :src="article.authorAvatar" :size="48"></el-avatar>
              <div class="author-details">
                <span class="author-name">{{ article.authorName }}</span>
                <div class="post-meta">
                  <span><i class="el-icon-date"></i> {{ formatDate(article.publishedDate) }}</span>
                  <span><i class="el-icon-view"></i> {{ formatNumber(article.views) }} 阅读</span>
                  <span><i class="el-icon-chat-line-square"></i> {{ article.comments }} 评论</span>
                </div>
              </div>
              <button class="follow-btn" @click="followAuthor">
                <i class="el-icon-plus"></i>
                关注作者
              </button>
            </div>

            <div class="article-tags">
              <span v-for="tag in article.tags" :key="tag" class="tag">
                {{ tag }}
              </span>
            </div>
          </div>

          <!-- 文章概要 -->
          <div class="article-summary" v-if="article.summary">
            <i class="el-icon-info"></i>
            <p>{{ article.summary }}</p>
          </div>
        </header>

        <!-- 文章内容 -->
        <div 
          class="article-content markdown-body"
          :style="{ fontSize: fontSize + 'px' }"
          v-html="article.content"
          ref="contentRef"
        ></div>

        <!-- 文章底部 -->
        <footer class="article-footer">
          <div class="article-copyright">
            <h3>文章版权</h3>
            <p>作者：{{ article.authorName }}</p>
            <p>链接：{{ currentUrl }}</p>
            <p>版权声明：本文采用 CC BY-NC-SA 4.0 许可协议。转载请注明出处！</p>
          </div>

          <div class="article-actions">
            <div class="action-btns">
              <button class="action-btn like-btn" :class="{ active: isLiked }" @click="toggleLike">
                <i class="el-icon-star-off"></i>
                <span>{{ isLiked ? '已点赞' : '点赞' }}</span>
                <span class="count">{{ likeCount }}</span>
              </button>
              <button class="action-btn" @click="toggleBookmark">
                <i :class="isBookmarked ? 'el-icon-collection-tag' : 'el-icon-collection'"></i>
                <span>{{ isBookmarked ? '已收藏' : '收藏' }}</span>
              </button>
            </div>

            <div class="share-btns">
              <button class="share-btn" @click="showShareMenu = true">
                <i class="el-icon-share"></i>
              </button>
            </div>
          </div>
        </footer>

        <!-- 评论区域 -->
        <section class="comments-section">
          <h2 class="section-title">
            评论区
            <span class="comment-count">{{ article.comments }}条评论</span>
          </h2>
          
          <!-- 评论输入框 -->
          <div class="comment-input">
            <el-avatar :src="currentUser.avatar" :size="40"></el-avatar>
            <div class="input-wrapper">
              <el-input
                type="textarea"
                v-model="commentContent"
                :rows="2"
                placeholder="写下你的评论..."
              ></el-input>
              <div class="input-actions">
                <button class="emoji-btn">
                  <i class="el-icon-magic-stick"></i>
                </button>
                <button 
                  class="submit-btn"
                  :disabled="!commentContent.trim()"
                  @click="submitComment"
                >
                  发表评论
                </button>
              </div>
            </div>
          </div>

          <!-- 评论列表 -->
          <div class="comments-list">
            <div 
              v-for="comment in comments" 
              :key="comment.id"
              class="comment-item"
            >
              <el-avatar :src="comment.avatar" :size="40"></el-avatar>
              <div class="comment-content">
                <div class="comment-header">
                  <span class="commenter-name">{{ comment.name }}</span>
                  <span class="comment-time">{{ formatDate(comment.time) }}</span>
                </div>
                <p class="comment-text">{{ comment.content }}</p>
                <div class="comment-actions">
                  <button @click="likeComment(comment)">
                    <i class="el-icon-thumb"></i>
                    {{ comment.likes }}
                  </button>
                  <button @click="replyComment(comment)">
                    <i class="el-icon-chat-line-round"></i>
                    回复
                  </button>
                </div>
                
                <!-- 回复列表 -->
                <div class="replies-list" v-if="comment.replies && comment.replies.length">
                  <div 
                    v-for="reply in comment.replies" 
                    :key="reply.id"
                    class="reply-item"
                  >
                    <el-avatar :src="reply.avatar" :size="32"></el-avatar>
                    <div class="reply-content">
                      <div class="reply-header">
                        <span class="replier-name">{{ reply.name }}</span>
                        <span class="reply-time">{{ formatDate(reply.time) }}</span>
                      </div>
                      <p class="reply-text">{{ reply.content }}</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>
      </main>

      <!-- 右侧边栏 -->
      <aside class="article-sidebar">
        <!-- 作者信息卡片 -->
        <div class="author-card">
          <div class="author-header">
            <el-avatar :src="article.authorAvatar" :size="64"></el-avatar>
            <h3>{{ article.authorName }}</h3>
            <p class="author-title">{{ article.authorTitle || '资深开发者' }}</p>
          </div>
          <div class="author-stats">
            <div class="stat-item">
              <span class="stat-value">{{ (article.authorStats && article.authorStats.articles) || 0 }}</span>
              <span class="stat-label">文章</span>
            </div>
            <div class="stat-item">
              <span class="stat-value">{{ (article.authorStats && article.authorStats.followers) || 0 }}</span>
              <span class="stat-label">粉丝</span>
            </div>
            <div class="stat-item">
              <span class="stat-value">{{ (article.authorStats && article.authorStats.likes) || 0 }}</span>
              <span class="stat-label">获赞</span>
            </div>
          </div>
          <button class="follow-author-btn" @click="followAuthor">
            <i class="el-icon-plus"></i>
            关注作者
          </button>
        </div>

        <!-- 目录导航 -->
        <div class="toc-nav" v-if="toc.length > 0">
          <div class="toc-header">
            <h3>目录</h3>
            <button class="expand-btn" @click="expandAllToc">
              <i :class="isAllExpanded ? 'el-icon-minus' : 'el-icon-plus'"></i>
            </button>
          </div>
          <div class="toc-tree">
            <div 
              v-for="(item, index) in toc" 
              :key="index"
              class="toc-item"
              :class="{ 
                active: currentHeading === item.id,
                [`level-${item.level}`]: true 
              }"
              @click="scrollToHeading(item.id)"
            >
              {{ item.text }}
            </div>
          </div>
        </div>

        <!-- 相关推荐 -->
        <div class="related-articles">
          <h3 class="section-title">相关推荐</h3>
          <div class="article-list">
            <div 
              v-for="article in relatedArticles" 
              :key="article.id"
              class="article-item"
              @click="navigateToArticle(article.id)"
            >
              <div class="article-cover">
                <img :src="article.cover" :alt="article.title">
              </div>
              <div class="article-info">
                <h4>{{ article.title }}</h4>
                <div class="article-meta">
                  <span><i class="el-icon-view"></i> {{ formatNumber(article.views) }}</span>
                  <span><i class="el-icon-star-off"></i> {{ article.likes }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 热门标签 -->
        <div class="hot-tags">
          <h3 class="section-title">热门标签</h3>
          <div class="tags-cloud">
            <span 
              v-for="tag in hotTags" 
              :key="tag.id"
              class="tag"
              :style="{ fontSize: tag.weight + 'px' }"
            >
              {{ tag.name }}
            </span>
          </div>
        </div>
      </aside>
    </div>

    <!-- 分享菜单 -->
    <el-dialog
      title="分享文章"
      :visible.sync="showShareMenu"
      width="400px"
      class="share-dialog"
    >
      <div class="share-options">
        <div class="share-link">
          <input type="text" :value="currentUrl" readonly ref="shareLink">
          <button @click="copyShareLink">复制链接</button>
        </div>
        <div class="qrcode-section">
          <div class="qrcode">
            <!-- 这里可以添加二维码组件 -->
          </div>
          <p>扫码分享到微信</p>
        </div>
      </div>
    </el-dialog>

    <!-- 提示消息 -->
    <transition name="fade">
      <div v-if="showToast" class="toast" :class="toastType">
        {{ toastMessage }}
      </div>
    </transition>
  </div>
</template>

<script>
import axios from 'axios';
import { marked } from 'marked';
import hljs from 'highlight.js';
import 'highlight.js/styles/atom-one-dark.css';

export default {
  name: 'ArticleFont',

  data() {
    return {
      article: {
        title: '',
        authorName: '',
        authorAvatar: '',
        publishedDate: '',
        views: 0,
        comments: 0,
        content: '',
        tags: [],
        summary: ''
      },
      language: 'zh',
      articleId: '',
      readingProgress: 0,
      fontSize: 16,
      isDarkMode: false,
      isLiked: false,
      isBookmarked: false,
      likeCount: 0,
      showShareMenu: false,
      currentHeading: '',
      isAllExpanded: true,
      toc: [],
      showToast: false,
      toastMessage: '',
      toastType: 'info',
      sharePlatforms: [
        { name: '微信', type: 'wechat', icon: 'fab fa-weixin' },
        { name: '微博', type: 'weibo', icon: 'fab fa-weibo' },
        { name: 'Twitter', type: 'twitter', icon: 'fab fa-twitter' },
        { name: 'Facebook', type: 'facebook', icon: 'fab fa-facebook' }
      ],
      relatedArticles: []
    }
  },

  computed: {
    currentUrl() {
      return window.location.href;
    }
  },

  mounted() {
    // 设置 marked 配置
    marked.setOptions({
      highlight: function(code, lang) {
        if (lang && hljs.getLanguage(lang)) {
          return hljs.highlight(lang, code).value;
        }
        return hljs.highlightAuto(code).value;
      },
      breaks: true,
      gfm: true
    });

    this.initArticle();
    this.initScrollListener();
    this.generateToc();
    this.fetchRelatedArticles();
  },

  methods: {
    async initArticle() {
      this.language = this.$route.params.language;
      this.articleId = this.$route.params.articleId;

      if (this.language === "zh-CN") this.language = "zh";
      if (this.language === "en-US") this.language = "en";

      try {
        const response = await axios.post(`/api/doc/article/details`, {
          articleId: this.articleId,
          language: this.language,
        });

        if (response.data.code === 200) {
          const data = response.data.data;
          this.article = {
            ...this.article,
            ...data,
            content: marked(data.content)
          };
          document.title = `${this.article.title} - E特尔诺`;
        }
      } catch (error) {
        this.showToastMessage('获取文章失败', 'error');
      }
    },

    initScrollListener() {
      window.addEventListener('scroll', this.handleScroll);
    },

    handleScroll() {
      const docElement = document.documentElement;
      const winScroll = window.pageYOffset || docElement.scrollTop;
      const height = docElement.scrollHeight - docElement.clientHeight;
      this.readingProgress = (winScroll / height) * 100;

      // 更新当前阅读的标题
      this.updateCurrentHeading();
    },

    generateToc() {
      const content = this.$refs.contentRef;
      if (!content) return;

      const headings = content.querySelectorAll('h1, h2, h3, h4, h5, h6');
      this.toc = Array.from(headings).map((heading, index) => ({
        id: `heading-${index}`,
        text: heading.textContent,
        level: parseInt(heading.tagName.charAt(1)),
      }));

      // 为标题添加id
      headings.forEach((heading, index) => {
        heading.id = `heading-${index}`;
      });
    },

    scrollToHeading(id) {
      const element = document.getElementById(id);
      if (element) {
        element.scrollIntoView({ behavior: 'smooth' });
      }
    },

    updateCurrentHeading() {
      const headings = document.querySelectorAll('h1, h2, h3, h4, h5, h6');
      for (const heading of headings) {
        const rect = heading.getBoundingClientRect();
        if (rect.top >= 0 && rect.top <= window.innerHeight / 2) {
          this.currentHeading = heading.id;
          break;
        }
      }
    },

    adjustFontSize(action) {
      const min = 14;
      const max = 20;
      if (action === 'increase' && this.fontSize < max) {
        this.fontSize += 1;
      } else if (action === 'decrease' && this.fontSize > min) {
        this.fontSize -= 1;
      }
    },

    toggleDarkMode() {
      this.isDarkMode = !this.isDarkMode;
    },

    async toggleLike() {
      if (this.isLiked) {
        this.likeCount -= 1;
      } else {
        this.likeCount += 1;
        this.showToastMessage('感谢点赞！', 'success');
      }
      this.isLiked = !this.isLiked;
      
      // TODO: 调用点赞API
    },

    toggleBookmark() {
      this.isBookmarked = !this.isBookmarked;
      this.showToastMessage(
        this.isBookmarked ? '已添加到收藏！' : '已取消收藏',
        this.isBookmarked ? 'success' : 'info'
      );
      // TODO: 调用收藏API
    },

    shareArticle(platform) {
      // TODO: 实现分享逻辑
      this.showShareMenu = false;
      this.showToastMessage('分享成功！', 'success');
    },

    copyShareLink() {
      const linkInput = this.$refs.shareLink;
      linkInput.select();
      document.execCommand('copy');
      this.showToastMessage('链接已复制到剪贴板！', 'success');
    },

    async fetchRelatedArticles() {
      // TODO: 获取相关文章
      this.relatedArticles = [
        {
          id: 1,
          title: '相关文章1',
          excerpt: '这是一篇相关文章的摘要...',
          cover: 'https://picsum.photos/300/200?random=1',
          views: 1234,
          likes: 56
        },
        // ... 更多相关文章
      ];
    },

    showToastMessage(message, type = 'info') {
      this.toastMessage = message;
      this.toastType = type;
      this.showToast = true;
      setTimeout(() => {
        this.showToast = false;
      }, 3000);
    },

    formatDate(date) {
      return new Date(date).toLocaleDateString();
    },

    formatNumber(num) {
      return num > 1000 ? (num/1000).toFixed(1) + 'k' : num;
    },

    navigateToArticle(id) {
      // 跳转到相关文章
      this.$router.push(`/article/${id}`);
    }
  },

  beforeDestroy() {
    window.removeEventListener('scroll', this.handleScroll);
  }
}
</script>

<style scoped>
/* 基础样式 */
.article-page {
  min-height: 100vh;
  background: #f8f9fa;
  padding-top: 4px; /* 为进度条留出空间 */
}

/* 阅读进度条 */
.reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: #eee;
  z-index: 1000;
}

.progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #1a237e, #0d47a1);
  transition: width 0.3s ease;
}

/* 文章容器布局 */
.article-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 2rem;
  display: grid;
  grid-template-columns: 60px 1fr 250px;
  gap: 2rem;
  position: relative;
}

/* 左侧工具栏 */
.article-toolbar {
  position: sticky;
  top: 2rem;
  height: fit-content;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.tool-group {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  background: white;
  padding: 1rem;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.tool-btn {
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 8px;
  background: #f8f9fa;
  color: #666;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.tool-btn:hover {
  background: #e3f2fd;
  color: #1a237e;
  transform: translateY(-2px);
}

.tool-btn.active {
  background: #1a237e;
  color: white;
}

.like-btn .count {
  position: absolute;
  top: -5px;
  right: -5px;
  background: #f44336;
  color: white;
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
  border-radius: 10px;
  min-width: 20px;
}

/* 文章主体区域 */
.article-main {
  background: white;
  border-radius: 16px;
  padding: 3rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.article-main.dark-mode {
  background: #1a1a1a;
  color: #fff;
}

/* 文章头部 */
.article-header {
  margin-bottom: 3rem;
}

.article-title {
  font-size: 2.5rem;
  font-weight: 700;
  color: #1a237e;
  margin-bottom: 1.5rem;
  line-height: 1.3;
}

.dark-mode .article-title {
  color: #fff;
}

.article-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
}

.author-info {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.author-details {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.author-name {
  font-size: 1.1rem;
  font-weight: 600;
  color: #1a237e;
}

.dark-mode .author-name {
  color: #fff;
}

.post-meta {
  display: flex;
  gap: 1rem;
  color: #666;
  font-size: 0.9rem;
}

.post-meta span {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.article-tags {
  display: flex;
  gap: 0.5rem;
}

.tag {
  padding: 0.25rem 0.75rem;
  background: #e3f2fd;
  color: #1a237e;
  border-radius: 20px;
  font-size: 0.9rem;
  transition: all 0.3s ease;
}

.tag:hover {
  background: #1a237e;
  color: white;
  transform: translateY(-2px);
}

/* 文章概要 */
.article-summary {
  background: #f8f9fa;
  border-left: 4px solid #1a237e;
  padding: 1.5rem;
  margin: 2rem 0;
  position: relative;
}

.dark-mode .article-summary {
  background: #2d2d2d;
  border-left-color: #4285f4;
}

.quote-icon {
  position: absolute;
  top: 1rem;
  left: 1rem;
  color: #1a237e;
  opacity: 0.1;
  font-size: 2rem;
}

/* 文章内容 */
.article-content {
  line-height: 1.8;
  color: #333;
  transition: all 0.3s ease;
}

.dark-mode .article-content {
  color: #e0e0e0;
}

/* 文章底部 */
.article-footer {
  margin-top: 4rem;
  padding-top: 2rem;
  border-top: 1px solid #eee;
}

.article-copyright {
  background: #f8f9fa;
  padding: 1.5rem;
  border-radius: 12px;
  margin-bottom: 2rem;
}

.dark-mode .article-copyright {
  background: #2d2d2d;
}

.article-copyright h3 {
  color: #1a237e;
  margin-bottom: 1rem;
}

.dark-mode .article-copyright h3 {
  color: #fff;
}

.article-copyright p {
  color: #666;
  margin: 0.5rem 0;
}

.article-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.action-btns {
  display: flex;
  gap: 1rem;
}

.action-btn {
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 8px;
  background: #f8f9fa;
  color: #666;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.action-btn:hover {
  background: #e3f2fd;
  color: #1a237e;
  transform: translateY(-2px);
}

.action-btn.like-btn {
  background: #1a237e;
  color: white;
}

.action-btn.like-btn:hover {
  background: #0d47a1;
}

.share-btns {
  display: flex;
  gap: 0.5rem;
}

.share-btn {
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 8px;
  background: #f8f9fa;
  color: #666;
  cursor: pointer;
  transition: all 0.3s ease;
}

.share-btn:hover {
  background: #e3f2fd;
  color: #1a237e;
  transform: translateY(-2px);
}

/* 右侧目录 */
.article-toc {
  position: sticky;
  top: 2rem;
  height: calc(100vh - 4rem);
  overflow-y: auto;
  padding: 1.5rem;
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.toc-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #eee;
}

.toc-header h3 {
  color: #1a237e;
  font-size: 1.1rem;
}

.expand-btn {
  background: none;
  border: none;
  color: #666;
  cursor: pointer;
  transition: all 0.3s ease;
}

.expand-btn:hover {
  color: #1a237e;
}

.toc-tree {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.toc-item {
  padding: 0.5rem;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 0.9rem;
  color: #666;
}

.toc-item:hover {
  background: #f8f9fa;
  color: #1a237e;
}

.toc-item.active {
  background: #e3f2fd;
  color: #1a237e;
  font-weight: 500;
}

.level-1 { padding-left: 0.5rem; }
.level-2 { padding-left: 1.5rem; }
.level-3 { padding-left: 2.5rem; }
.level-4 { padding-left: 3.5rem; }
.level-5 { padding-left: 4.5rem; }
.level-6 { padding-left: 5.5rem; }

/* 相关推荐 */
.related-articles {
  margin-top: 4rem;
  padding-top: 2rem;
  border-top: 1px solid #eee;
}

.section-title {
  font-size: 1.5rem;
  color: #1a237e;
  margin-bottom: 2rem;
}

.articles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
}

.article-card {
  background: #f8f9fa;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s ease;
}

.article-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.card-cover {
  height: 200px;
  overflow: hidden;
}

.card-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.article-card:hover .card-cover img {
  transform: scale(1.1);
}

.card-content {
  padding: 1.5rem;
}

.card-title {
  font-size: 1.1rem;
  color: #1a237e;
  margin-bottom: 0.75rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-excerpt {
  color: #666;
  font-size: 0.9rem;
  margin-bottom: 1rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-meta {
  display: flex;
  gap: 1rem;
  color: #666;
  font-size: 0.9rem;
}

/* 分享对话框 */
.share-dialog {
  border-radius: 16px;
  overflow: hidden;
}

.share-options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-bottom: 2rem;
}

.share-option {
  padding: 1rem;
  background: #f8f9fa;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.share-option:hover {
  background: #e3f2fd;
  transform: translateY(-2px);
}

.share-option i {
  font-size: 1.5rem;
  color: #1a237e;
}

.share-link {
  display: flex;
  gap: 1rem;
  margin-top: 1rem;
}

.share-link input {
  flex: 1;
  padding: 0.75rem;
  border: 1px solid #eee;
  border-radius: 8px;
}

.share-link button {
  padding: 0.75rem 1.5rem;
  background: #1a237e;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.share-link button:hover {
  background: #0d47a1;
}

/* Toast提示 */
.toast {
  position: fixed;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  padding: 1rem 2rem;
  border-radius: 8px;
  color: white;
  font-weight: 500;
  z-index: 1000;
}

.toast.success {
  background: #4caf50;
}

.toast.error {
  background: #f44336;
}

.toast.info {
  background: #2196f3;
}

/* 动画 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}

/* 响应式调整 */
@media (max-width: 1200px) {
  .article-container {
    grid-template-columns: 60px 1fr;
    padding: 1rem;
  }
  
  .article-toc {
    display: none;
  }
}

@media (max-width: 768px) {
  .article-container {
    grid-template-columns: 1fr;
  }
  
  .article-toolbar {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    flex-direction: row;
    background: white;
    padding: 0.75rem;
    border-radius: 50px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    z-index: 100;
  }
  
  .tool-group {
    flex-direction: row;
    background: none;
    padding: 0;
    box-shadow: none;
  }
  
  .article-main {
    padding: 1.5rem;
  }
  
  .article-title {
    font-size: 1.8rem;
  }
  
  .article-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
  
  .article-tags {
    width: 100%;
    overflow-x: auto;
    padding-bottom: 0.5rem;
  }
  
  .article-actions {
    flex-direction: column;
    gap: 1rem;
  }
  
  .action-btns {
    width: 100%;
  }
  
  .action-btn {
    flex: 1;
    justify-content: center;
  }
  
  .share-btns {
    width: 100%;
    justify-content: center;
  }
  
  .articles-grid {
    grid-template-columns: 1fr;
  }
}

/* 暗黑模式适配 */
@media (prefers-color-scheme: dark) {
  .article-page {
    background: #121212;
  }
  
  .article-toolbar,
  .article-main,
  .article-toc {
    background: #1e1e1e;
    border-color: #333;
  }
  
  .tool-btn {
    background: #2d2d2d;
    color: #aaa;
  }
  
  .tool-btn:hover {
    background: #333;
    color: #fff;
  }
  
  .article-title,
  .author-name,
  .section-title {
    color: #fff;
  }
  
  .post-meta,
  .article-content,
  .toc-item {
    color: #aaa;
  }
  
  .article-summary,
  .article-copyright {
    background: #2d2d2d;
    border-color: #4285f4;
  }
  
  .tag {
    background: #2d2d2d;
    color: #4285f4;
  }
  
  .article-card {
    background: #1e1e1e;
  }
  
  .card-title {
    color: #fff;
  }
  
  .card-excerpt,
  .card-meta {
    color: #aaa;
  }
  
  .share-option {
    background: #2d2d2d;
  }
  
  .share-option:hover {
    background: #333;
  }
  
  .share-link input {
    background: #2d2d2d;
    border-color: #333;
    color: #fff;
  }
}

/* 打印样式优化 */
@media print {
  .article-toolbar,
  .article-toc,
  .article-actions,
  .related-articles {
    display: none;
  }
  
  .article-container {
    display: block;
    padding: 0;
  }
  
  .article-main {
    box-shadow: none;
    padding: 0;
  }
  
  .article-content {
    font-size: 12pt;
    line-height: 1.6;
  }
  
  .article-title {
    font-size: 24pt;
    margin-bottom: 1cm;
  }
  
  .article-meta {
    margin-bottom: 1cm;
  }
  
  .article-copyright {
    margin-top: 1cm;
    padding: 1cm;
    border: 1px solid #eee;
  }
}

/* 动效优化 */
.article-main {
  animation: fadeIn 0.5s ease-out;
}

.tool-btn,
.action-btn,
.share-btn {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.tool-btn:active,
.action-btn:active,
.share-btn:active {
  transform: scale(0.95);
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 滚动条美化 */
.article-content::-webkit-scrollbar,
.article-toc::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.article-content::-webkit-scrollbar-thumb,
.article-toc::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 3px;
}

.article-content::-webkit-scrollbar-track,
.article-toc::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

/* 代码块样式优化 */
.markdown-body pre {
  background: #282c34;
  border-radius: 8px;
  padding: 1rem;
  margin: 1.5rem 0;
  overflow-x: auto;
}

.markdown-body code {
  font-family: 'Fira Code', monospace;
  font-size: 0.9em;
}

/* 图片查看优化 */
.article-content img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  transition: all 0.3s ease;
  cursor: zoom-in;
}

.article-content img:hover {
  transform: scale(1.02);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

/* 作者卡片样式 */
.author-card {
  background: white;
  border-radius: 16px;
  padding: 1.5rem;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  margin-bottom: 2rem;
}

.author-header {
  margin-bottom: 1.5rem;
}

.author-header h3 {
  margin: 1rem 0 0.5rem;
  font-size: 1.2rem;
  color: #1a237e;
}

.author-title {
  color: #666;
  font-size: 0.9rem;
}

.author-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.stat-item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.stat-value {
  font-size: 1.2rem;
  font-weight: 600;
  color: #1a237e;
}

.stat-label {
  font-size: 0.9rem;
  color: #666;
}

/* 评论区样式 */
.comments-section {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid #eee;
}

.comment-input {
  display: flex;
  gap: 1rem;
  margin-bottom: 2rem;
}

.input-wrapper {
  flex: 1;
}

.input-actions {
  display: flex;
  justify-content: space-between;
  margin-top: 1rem;
}

.emoji-btn {
  padding: 0.5rem;
  border: none;
  background: none;
  color: #666;
  cursor: pointer;
}

.submit-btn {
  padding: 0.5rem 1.5rem;
  border: none;
  border-radius: 8px;
  background: #1a237e;
  color: white;
  cursor: pointer;
  transition: all 0.3s ease;
}

.submit-btn:disabled {
  background: #ccc;
  cursor: not-allowed;
}

/* 热门标签云 */
.tags-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 1rem;
}

.tag {
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  background: #e3f2fd;
  color: #1a237e;
  cursor: pointer;
  transition: all 0.3s ease;
}

.tag:hover {
  background: #1a237e;
  color: white;
  transform: translateY(-2px);
}

/* 响应式调整 */
@media (max-width: 1200px) {
  .article-container {
    grid-template-columns: 60px 1fr;
  }
  
  .article-sidebar {
    display: none;
  }
}

@media (max-width: 768px) {
  .article-container {
    grid-template-columns: 1fr;
    padding: 1rem;
  }
  
  .article-toolbar {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    flex-direction: row;
    background: white;
    padding: 0.75rem;
    border-radius: 50px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    z-index: 100;
  }
}
</style>